<template>
	<div class="system-role-management">
		<div class="crumbs-wrapper">
			<Crumbs title="系统管理" sub-title="角色权限管理" />
		</div>
		<div class="mainbox">
			<div class="nav">
				<div>
					<div class="treetitle">角色列表</div>
					<div class="searchbox">
						<el-form :inline="true" size="small">
							<el-form-item>
								<el-input size="small" placeholder="请输入查询内容" v-model="roleKeyword">
									<i slot="suffix" class="el-input__icon el-icon-search"></i>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="showCreateDialog">新增角色</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div>
						<el-table :data="roleList" :show-header="false" :highlight-current-row="true" :cell-style="{padding: '5px'}"
							@row-click="rowClick" v-loading="roleTableLoading">
							<el-table-column prop="roleName" width="150" />
							<el-table-column fixed="right" width="100">
								<template slot-scope="scope">
									<template v-if="scope.row.editable">
										<el-button type="text" size="small" :style="{padding: '0px'}"
											@click="showEditDialog(scope.row)" >编辑</el-button>
										<el-button type="text" size="small" :style="{padding: '0px'}"
											@click="removeRole(scope.row)">删除</el-button>
									</template>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<div class="main">
				<el-tabs v-model="activeName">
					<el-tab-pane label="权限设置" name="jurisdiction">
						<Accredit :activeRoleId="currentRole.roleId" :activeRoleName="currentRole.roleName" />
					</el-tab-pane>
					<el-tab-pane label="添加用户" name="adduser">
						<Adduser :activeRoleId="currentRole.roleId" :activeRoleName="currentRole.roleName" />
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<!-- 角色dialog -->
		<el-dialog :title="roleDialogtype=='edit' ? '编辑角色' : '添加角色'" :visible.sync="roleDialogVisible" width="30%">
			<el-form label-width="100px">
				<el-form-item label="角色名称" required>
					<el-input v-model="roleForm.roleName" placeholder="请输入角色名称"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" required>
					<el-input v-model="roleForm.remark" placeholder="请输入角色描述"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="roleDialogVisible=false">取 消</el-button>
				<el-button v-if="roleDialogtype=='new'" type="primary" @click="saveCreateRole">确 定</el-button>
				<el-button v-if="roleDialogtype=='edit'" type="primary" @click="saveEditRole">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Adduser from './adduser.vue'
	import Accredit from './accredit.vue'
	export default {
		components: {
			Adduser,
			Accredit
		},
		data() {
			return {
				roleDialogVisible: false, //是否显示角色弹窗
				roleDialogtype: 'new', //弹窗的类型， new新增 edit编辑
				activeName: 'jurisdiction',  //当前在哪个TAB页 
				roleForm: {
					roleName: '',
					remark: ''
				},
				roleKeyword: '', //角色查询关键字
				roleList: [], //角色列表
				currentRole: 0, //当前选中行
				roleTableLoading: false 
			}
		},
		mounted() {
			this.loadRoleData();
		},
		methods: {
			loadRoleData() {
				this.roleTableLoading = true;
				this.$http({
					url: '/api/system/role/list'
				}).then(res => {
					this._roleList = this.roleList = res.data.data
					this.roleTableLoading = false
				})
			},
			rowClick(row) {
				this.currentRole = row;
			},
			showCreateDialog() {
				this.roleForm = {};
				this.roleDialogVisible = true;
				this.roleDialogtype = 'new';
			},
			showEditDialog(row) {
				this.roleForm = {...row};
				this.roleDialogVisible = true;
				this.roleDialogtype = 'edit';
			},
			saveCreateRole() {
				this.$http({
					url: '/api/system/role/add',
					method: 'POST',
					data: this.roleForm
				}).then( res => {
					this.roleDialogVisible = false;
					this.loadRoleData()
				})
			},
			saveEditRole() {
				this.$http({
					url: '/api/system/role/edit',
					method: 'POST',
					data: this.roleForm
				}).then( res => {
					this.roleDialogVisible = false;
					this.loadRoleData()
				})
			},
			removeRole(row) {
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					type: 'error'
				}).then(() => {
					this.$http({
						url: `/api/system/role/remove/${row.roleId}`,
					}).then( res => {
						this.$message.success('删除成功');
						this.loadRoleData()
					})
				})
			}
		},
		watch: {
			roleKeyword(newVal) {
				this.roleList = this._roleList.filter(role=>{
					return role.roleName.indexOf(newVal) > -1;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.system-role-management {
		height: calc(100vh - 100px);
		background-color: #f8f8f8;
		padding: 5px 30px 10px;
		.mainbox {
			display: flex;
			height: 92%;
			.nav {
				width: 350px;
				background-color: white;
				margin-right: 10px;
				box-sizing: border-box;
				padding: 20px 10px 10px 10px;
				font-size: 16px;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.treetitle {
					border-bottom: 1px solid #eeeeee;
					padding-bottom: 20px;
				}
				.searchbox {
					margin-top: 15px;
				}
			}
			.main {
				flex: 1;
				background-color: white;
				overflow-y: auto;
				padding: 30px;
				position: relative;
				.paging {
					position: absolute;
					left: 50%;
					bottom: 20px;
					transform: translateX(-50%);
					margin-top: 10px;
				}
			}
		}
	}
</style>
